<template>
  <div class="app-container">

    <div class="search-container">
      <div class="search-title">
        查询条件
      </div>
      <div class="search-form">
        <div class="form-row">

          <div class="form-column">
            <span class="column-title">姓名</span>
            <el-input v-model="queryParams.personnelName" placeholder="请输入" class="input-w150" clearable
              @keyup.enter.native="handleQuery" />
          </div>
          <!-- <div class="form-column">
            <span class="column-title">编号</span>
            <el-input v-model="queryParams.equipmentEncoded" placeholder="请输入" class="input-w150" clearable
              @keyup.enter.native="handleQuery" />
          </div> -->
          <!-- <div class="form-column">
            <span class="column-title">状态</span>
            <el-select  @keyup.enter.native="handleQuery" v-model="queryParams.allotmentStatus"  placeholder="请选择" class="input-w150" clearable>
              <el-option label="已派发" :value="0"></el-option>
              <el-option label="未派发" :value="1"></el-option>
            </el-select>
          </div> -->
          <div class="form-column">
            <span class="column-title">创建时间</span>
            <el-date-picker v-model="createTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="daterange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="input-w383" clearable>
            </el-date-picker>
          </div>

          <div class="form-column">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </div>
        </div>
      </div>
    </div>


    <div class="body-container">
      <div class="operation-bar">
        <div class="bar-title">
          装备配发列表
        </div>
        <div class="bar-btn__wrapper">
          <div class="bar-btn" @click="handleDownLoad"><i class="el-icon-download"></i>导出</div>
        </div>
      </div>

      <el-table v-loading="loading" stripe :data="dataList">
        <el-table-column type="index" label="#" align="center" min-width="100"></el-table-column>
        <el-table-column label="姓名" prop="personnelName" align="center">
          <template slot-scope="scope">
            <el-link @click="handleToDetail(scope.row)" :underline="false" type="primary">{{ scope.row.personnelName
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unitName" align="center" min-width="150">
            <template slot-scope="scope">
              {{ getDeptName(scope.row.unitCode) }}
            </template>
          </el-table-column>
        <el-table-column label="名称" prop="equipmentName" align="center" />
        <el-table-column label="型号" prop="modelName" align="center" />
        <el-table-column label="编号" prop="equipmentEncoded" align="center" />
        <el-table-column label="数量" prop="num" align="center" />
        <el-table-column label="状态" prop="useStatus" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.allotmentStatus == 0" type="success">已派发</el-tag>
            <el-tag v-else type="danger">未派发</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center" min-width="150" />
      </el-table>

      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>


    <UserDetail :id="personnelId" :visible.sync="userDialog"></UserDetail>
  </div>
</template>
  
<script>
import { getToken } from "@/utils/auth";
import { allotmentList, downAllotmentInfo, deleteAllotment } from '@/api/equipment';
import UserDetail from '@/components/userDetail.vue'
import { getDeptName } from "@/utils/ruoyi";
export default {
  components: {
    UserDetail
  },
  data() {
    return {
      userDialog:false,
      personnelId:'',
      createTime:[],
      equipmentName:'',
      dataList: [],
      loading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    deptTreeList () {
      return this.$store.state.user.deptTreeList
    },
    deptList () {
      return this.$store.state.user.deptList
    },
  },
  created() {
    if(this.$route.query.equipmentName ){
      this.equipmentName = this.$route.query.equipmentName
      this.getList();
    }
  
  },
  methods: {
    getDeptName (id) {
      return getDeptName(this.deptList, id)
    },

    downloadExcel() {
      let a = document.createElement('a')
      a.href = '/static/upload_equipment_ allotment_template.xlsx'
      a.download = '装备导入配发模板.xlsx'
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    // 导入文件
    handleUploadFile() {
      this.uploadialog = true
    },
    // 打开用户详情
    handleToDetail(row) {
      this.userDialog = true;
      this.personnelId = String(row.personnelId)
    },
    // 下载装备配发
    async handleDownLoad() {
      let params = {
        ...this.queryParams
      }
      let res = await downAllotmentInfo(params);
      let blob = new Blob([res], {
        type: "application/octet-stream"
      });
      let objectUrl = URL.createObjectURL(blob);
      let a = document.createElement("a");
      a.href = objectUrl;
      a.setAttribute("download", "装备派发信息.xlsx");
      a.click();
      window.URL.revokeObjectURL(blob);
    },

    // 查询
    async getList() {
      this.loading = true;
      let params = {
        equipmentName:this.equipmentName,
        ...this.queryParams
      }
      if (this.createTime && this.createTime.length > 0) {
        params.startTime = this.createTime[0]
        params.endTime = this.createTime[1]
      }
      const res = await allotmentList(params)
      this.loading = false;
      if (res.code === 200) {
        this.dataList = res.rows || [];
        this.total = res.total || 0;
      } else {
        this.dataList = [];
        this.total = 0;
      }
    },
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      this.createTime=[]
      this.handleQuery();
    },
    // 删除
    handleDelete(row) {
      let that = this;
      this.$modal
        .confirm('是否确认删除？')
        .then(async function (res) {
          if (res == 'confirm') {
            let response = await deleteAllotment(row.id)
            if (response.code == 200) {
              that.$message.success('删除成功')
            } else {
              that.$message.error(response.msg)
            }
          }
        })
        .then(() => {
          this.getList();
        })
    }
  }
};
</script>